<template>
  <el-dialog :visible.sync="open" @close="close" :title="title" width="800px" append-to-body destory-on-close>
    <el-form ref="elForm" :model="formData" size="small" label-width="100px" label-position="left">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="事件标题" prop="event_name">
            {{ eventTitle }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="应急预案" prop="event_name">
            <el-row v-if="formData.plans.length > 0">
              <ul>
                <li v-for="(item, index) in formData.plans" :key="index">
                  {{ item.label }}
                  <el-button size="medium" type="text" icon="el-icon-delete-solid"
                    @click="handleRemovePlan(index)">移除</el-button>
                </li>
              </ul>
            </el-row>
            <el-row v-else>
              <el-button type="primary" size="mini" @click="handlePickPlan">选择预案</el-button>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认，立即处置</el-button>
    </div>
    <staff-choose-dialog ref="staffChooseDialog" :muilt="false" @handleOk="onStaffSelected" />
    <plan-picker ref="planPicker" @planSelected="onPlanSelected" />
  </el-dialog>
</template>
<script>
import dialogMixin from "@/mixins/dialogMixin";
import PlanPicker from "@/views/components/planPicker/planAndLevel.vue";
import StaffChooseDialog from "@/views/components/staffChooseDialog/index.vue";
import * as HandleApi from "@/api/response/handle.js";

export default {
  name: "EventHandleDialog",
  mixins: [dialogMixin],
  components: { StaffChooseDialog, PlanPicker },
  props: {
    taskType: {
      type: String,
      default: "drill",
    },
  },
  data() {
    return {
      formData: {
        handleId: 0,
        plans: [],
      },
      title: "处置事件",
      nickName: "",
      eventTitle: "",
      eventId: 0,
      responseLevelOption: [],
      responseLevels: [
        {
          label: "Ⅰ级响应",
          value: 1,
        },
        {
          label: "Ⅱ级响应",
          value: 2,
        },
        {
          label: "Ⅲ级响应",
          value: 3,
        },
        {
          label: "Ⅳ级响应",
          value: 4,
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {
    showDialog(data) {
      this.$modal.loading("正在加载...");
      this.eventTitle = data.name;
      this.formData = {
        hdInfoId: data.hdInfoId,
        plans: [],
      };
      this.$modal.closeLoading();
      this.show();
    },
    handleConfirm() {
      // 调用事件处置接口
      HandleApi.handleExecute(this.formData)
        .then(res => {
          this.$modal.msgSuccess("事件已开启处置流程");
          this.$emit("onHandleStared");
          this.open = false;
        })
        .catch(e => {
          this.$modal.msgError(e.message);
        });
    },
    handlePickStaff() {
      this.$refs.staffChooseDialog.showDialog("选择执行人");
    },
    onStaffSelected(data) { },
    handlePickPlan() {
      this.$refs.planPicker.showDialog();
    },
    onPlanSelected(data, responseLevel) {
      let level = this.responseLevels.find(val => val.value == responseLevel);
      this.formData.plans.push({
        label: `${data.planName} - ${level.label}`,
        planId: data.id,
        planName: data.planName,
        responseLevel: responseLevel,
      });
    },
    handleRemovePlan(index) {
      this.formData.plans.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
ul,
li {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}
</style>
